<template>
	<view class="container">
		<view class="block" v-if="loading || siteList == ''">
			<view class="loading" v-if="loading">
				<u-loading></u-loading>
			</view>
			<u-empty mode="list" :show="siteList == '' ? true :false"></u-empty>
		</view>

		<view class="list" v-if="siteList != ''">
			<u-swipe-action @click="show = true;addressItem = res" @open="open" :index="index" vibrate-short :show="res.show"
			 v-for="(res, index) in siteList" :key="res.id" :options="options"> 
				<view class="item" @click="choiceAddress(res)">
					<view class="top">
						<view class="name">{{ res.userName }}</view>
						<view class="phone">{{ res.phone }}</view>
						<view class="tag" v-if="res.isChecked">
							<text class="red">默认</text>
						</view>
					</view>
					<view class="bottom">
						{{res.areaInfo}} {{res.address}}
						<view class="" style="margin-left: 30rpx;" @click.stop="toAddSite('edit',res)">
							<u-icon name="edit-pen" :size="40" color="#999999"></u-icon>
						</view>
					</view>
				</view>
			</u-swipe-action>
			<view class="safe-area-inset-bottom"></view>
		</view>

		<view class="addSite" @tap="toAddSite('add')">
			<view class="box">
				<view class="add">
					<u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon>新建收货地址
				</view>
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
		<u-modal show-cancel-button confirm-color="#FE4666" v-model="show" @confirm="confirmRemove" content="确认删除该地址吗？"></u-modal>
	</view>
</template>

<script>
	import WSCoordinate from '@/js_sdk/WSCoordinate'
	export default {
		data() {
			return {
				siteList: [],
				loading: true,
				addressItem: '',
				show: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: 'red'
					}
				}]
			};
		},
		onLoad(options) {
			this.getData();
			if (options.type == 'choice') {
				this.choice = true
			}
		},
		methods: {
			choiceAddress(item) {
				if (!this.choice) return
				var pages = getCurrentPages();
				if (pages.length > 1) {
					var beforePage = pages[pages.length - 2];
					beforePage.$vm.updateAddress(item);
				}
				uni.navigateBack()
				console.log(item);
			},
			async confirmRemove() {
				await this.$u.get('useraddress/delete/' + this.addressItem.id)
				this.siteList.splice(this.siteList.findIndex(item => item.id == this.addressItem.id), 1)
				uni.showToast({
					title: '已删除'
				})
			},
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.siteList[index].show = true;
				this.siteList.map((val, idx) => {
					if (index != idx) this.siteList[idx].show = false;
				})
			},
			getData() {
				this.$u.get('useraddress/list').then(res => {
					this.loading = false
					if (res != '') {
						res.forEach(item => {
							item.show = false
						})
					}
					this.siteList = res
				}).catch(error => {
					this.loading = false
				})
			},
			toAddSite(type, item) {
				if (type == 'edit') {
					let GCJ_Coordinate = WSCoordinate.transformFromBaiduToGCJ(item.latitude, item.longitude);
					item.latitude = GCJ_Coordinate.latitude
					item.longitude = GCJ_Coordinate.longitude
					uni.setStorageSync('addressInfo', item)
				}
				uni.navigateTo({
					url: '/pages/user/editAddress/editAddress?type=' + type
				});
			}
		}
	};
</script>

<style lang="scss">
	.container,
	.block,
	.loading,
	page {
		height: 100%;
	}

	.loading {
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.list {
		padding-bottom: 130rpx;
	}

	.item {
		padding: 40rpx 20rpx;

		.top {
			display: flex;
			font-weight: bold;
			font-size: 34rpx;

			.phone {
				margin-left: 60rpx;
			}

			.tag {
				display: flex;
				font-weight: normal;
				align-items: center;

				text {
					display: block;
					width: 60rpx;
					height: 34rpx;
					line-height: 34rpx;
					color: #ffffff;
					font-size: 20rpx;
					border-radius: 6rpx;
					text-align: center;
					margin-left: 30rpx;
					background-color: rgb(49, 145, 253);
				}

				.red {

					background: linear-gradient(90deg, #FD5D1D, #FD9C1D);
				}
			}
		}

		.bottom {
			display: flex;
			margin-top: 20rpx;
			font-size: 28rpx;
			justify-content: space-between;
			color: #999999;
		}
	}

	.addSite {
		position: fixed;
		font-size: 30rpx;
		bottom: 0;
		width: 100%;
		border-radius: 60rpx 60rpx 0 0;
		background: linear-gradient(90deg, #FF3868, #FC6161);
		.box {
			display: flex;
			line-height: 100rpx;
			justify-content: space-around;
		}

		.add {
			display: flex;
			align-items: center;
			color: #ffffff;

			.icon {
				margin-right: 10rpx;
			}
		}
	}
</style>
